import React from 'react';
import { Input, Button, List } from 'antd';

// 无状态组件(就是一个带有返回的函数)
const TodoListUI = (props) => {
  return (
    <div style={{marginTop: '10px',marginLeft:'10px'}}>
      <div>
        <Input value={props.inputValue}
          onChange={props.handleInputChange}
          placeholder="todo info"
          style={{width: '300px',marginRight: '10px'}}></Input>
        <Button type="primary" onClick={props.handleBtnClick}>提交</Button>
      </div>
      <List
        style={{marginTop:'10px',width:'500px'}}
        bordered
        dataSource={props.list}
        renderItem={(item,index) => (
          <List.Item onClick={()=>{props.handleItemDelete(index)}}> {item}</List.Item>
        )}
      />
    </div>
  )
}

// class TodoListUI extends Component {
//   render () {
//     return (
//       <div style={{marginTop: '10px',marginLeft:'10px'}}>
//         <div>
//           <Input value={this.props.inputValue}
//             onChange={this.props.handleInputChange}
//             placeholder="todo info"
//             style={{width: '300px',marginRight: '10px'}}></Input>
//           <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
//         </div>
//         <List
//           style={{marginTop:'10px',width:'500px'}}
//           bordered
//           dataSource={this.props.list}
//           renderItem={(item,index) => (
//             <List.Item onClick={()=>{this.props.handleItemDelete(index)}}> {item}</List.Item>
//           )}
//         />
//       </div>
//     )
//   }
// }

export default TodoListUI;